<template>
  <div class="filed-box">
    <ScrollContainer class="!pt-0px">
      <a-form :model="activeData" layout="vertical" :colon="false">
        <a-collapse v-model:activeKey="activeKey" accordion ghost expandIconPosition="end">
          <template v-if="activeData.type !== 'chart'">
            <a-collapse-panel :key="1" header="基础设置">
              <a-form-item name="type" label="单元类型">
                <jnpf-select v-model:value="activeData.type" :options="options" @change="onTypeChange" />
              </a-form-item>
              <template v-if="activeData.type === 'dataSource'">
                <ReportDataProperties :dataSource="activeData.dataSource" v-bind="getCommonBind" />
              </template>
            </a-collapse-panel>
          </template>
          <template v-if="activeData.type == 'chart'">
            <ReportChartProperties :key="1" v-bind="getChartBind" @updateDefaultChart="updateDefaultChart" />
            <ReportChartDataProperties :key="2" v-bind="getChartBind" />
            <ReportChartMainTitleProperties :key="3" v-bind="getChartBind" />
            <ReportChartSubtitleProperties :key="4" v-bind="getChartBind" />
            <ReportChartLegendProperties :key="5" v-bind="getChartBind" />
            <ReportChartMarginProperties :key="6" v-bind="getChartBind" />
          </template>
        </a-collapse>
      </a-form>
    </ScrollContainer>
  </div>
</template>

<script setup lang="ts">
  import { reactive, toRefs, onMounted, computed, watch } from 'vue';
  import { ScrollContainer } from '@/components/Container';
  import ReportDataProperties from './ReportDataProperties.vue';
  import ReportChartProperties from './ReportChartProperties.vue';
  import ReportChartMainTitleProperties from './ReportChartMainTitleProperties.vue';
  import ReportChartSubtitleProperties from './ReportChartSubtitleProperties.vue';
  import ReportChartDataProperties from './ReportChartDataProperties.vue';
  import ReportChartLegendProperties from './ReportChartLegendProperties.vue';
  import ReportChartMarginProperties from './ReportChartMarginProperties.vue';

  interface State {
    activeKey: Number;
  }

  const props = defineProps(['activeData', 'dataSetList', 'defaultEchartOptions', 'jnpfUniverRef']);

  const state = reactive<State>({
    activeKey: 1,
  });
  const { activeKey } = toRefs(state);

  const options = [
    { id: 'text', fullName: '文本' },
    { id: 'dataSource', fullName: '数据集' },
    // { id: 'chart', fullName: '图表' },
    // { id: 'link', fullName: '链接' },
    // { id: 'image', fullName: '图片' },
    // { id: 'barcode', fullName: '条形码' },
    // { id: 'qrcode', fullName: '二维码' },
  ];

  const getCommonBind = computed(() => ({
    dataSetList: props.dataSetList,
  }));
  const getChartBind = computed(() => ({
    dataSetList: props.dataSetList,
    chart: props.activeData.chart,
  }));

  watch(
    () => props.activeData.type,
    () => {
      state.activeKey = 1;
    },
    { deep: true },
  );

  function updateDefaultChart(type) {
    const newChart = {
      ...(props.defaultEchartOptions[type] || {}),
      classifyNameField: props.activeData.chart.classifyNameField,
      seriesNameField: props.activeData.chart.seriesNameField,
      seriesDataField: props.activeData.chart.seriesDataField,
      summaryType: props.activeData.chart.summaryType,
      chartType: type,
      title: props.activeData.chart.title,
      tooltip: props.activeData.chart.tooltip,
    };
    props.activeData.chart = newChart;
  }
  function onTypeChange() {
    props.activeData.cellData.v = '';
  }

  onMounted(() => {
    state.activeKey = 1;
  });
</script>
